<template>
	<!-- 券包商品 -->
	<view class="container w-100 h-100" v-if="!loading">
		<!-- 卡片 -->
		<view class="d-flex flex-column w-100" style="padding: 30rpx; padding-bottom: -34rpx; margin-bottom: 150rpx;">
			<view class="d-flex align-items-center bg-white"
				style="padding: 30rpx; height: 220rpx; margin-bottom: 34rpx; border-radius: 8rpx;"
				v-for="(item, index) in packages" :key="index" @tap="pay(item.id)">
				<image :src="item.image" style="width: 200rpx; height: 160rpx; margin-right: 20rpx;"></image>
				<view class="d-flex flex-fill flex-column justify-content-between" style="height: 160rpx;">
					<view class="font-size-lg text-color-base">{{ item.title }}</view>
					<view class="d-flex justify-content-between align-items-center">
						<view class="font-size-sm">￥{{ item.amount }}</view>
						<button type="primary" size="mini" plain class="pay-btn">去购买</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view
			class="d-flex position-fixed bg-base fixed-bottom text-color-primary font-size-base align-items-center just-content-center w-100"
			style="height: 150rpx;">
			<text>购买记录</text>
		</view>

	</view>
	<loading v-else></loading>
</template>

<script>
	import loading from '@/components/loading'

	export default {
		components: {
			loading
		},
		data() {
			return {
				loading: true, //是否在异步获取数据
				packages: [] //券包数据对象
			}
		},
		async onLoad() {
			await this.getPackages()
		},
		async onPullDownRefresh() {
			this.packages = []
			await this.getPackages()
			// 当刷新操作完成后，停止下拉刷新效果
			uni.stopPullDownRefresh();
		},
		methods: {
			async getPackages() {
				this.loading = true
				setTimeout(() => {
					// 这里是2秒后需要执行的代码
					this.$api('packages').then((result) => {
						this.packages = result
						console.log(result); // 输出 '数据'
					}); //调用api，获取券包数据
					this.loading = false
				}, 500);
			},
			pay(id) {
				uni.navigateTo({
					url: '/pages/packages/detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: -150rpx;
	}

	.pay-btn {
		height: 50rpx;
		width: 120rpx;
		font-size: $font-size-sm;
		border-radius: 50rpx;
		padding: 0;
		line-height: 50rpx;
		text-align: center;
	}
</style>